<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="选择行业" :isAppBtn="false"></HeadCustom>
		<SearchCustom placeholder="搜索行业" :keyword.sync="keyword" @search="serarchList" />
		<view class="mt8"></view>
		<view class="fboxRow filter-box" id="scroll-wrap">
			<view class="filter-left">
				<scroll-view scroll-y="true" class="scroll-Y" :style="{height: scrollHeight +'px'}">
					<view class="pt32">
						<view class="nav-item font26 color-6B707C font-ell1"
							:class="[intoView==item.industryId ? 'color-E8CDA7' : 'color-6B707C']"
							v-for="item in itemArr" :key="item.industryId" @click="move(item)">
							{{item.industryName}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="filter-center flex1">
				<scroll-view scroll-y="true" class="scroll-Y" :style="{height: scrollHeight +'px'}"
					:scroll-into-view="intoView">
					<view class="pt32 pb32">
						<view v-for="(item, index) in itemArr" :key="index">
							<view class="tit mt32 lh44 font30" :id="item.industryId">
								{{item.industryName}}
							</view>
							<view class="fboxWrap mt16">
								<view class="nav-item lh38 font-ell1"
									:class="tagsList.includes(cell.industryName)? 'active-btn': 'bg-21242C color-ACB4C7'"
									v-for="(cell, i) in item.children" :key="i" @click="checkTap(cell)">
									{{cell.industryName}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<template v-if="isCheckbox">
			<view class="filter-space"></view>
			<view class="filter-check">
				<view class="hd font30 lh44">选择行业：<text class="font26 color-6B707C">(最多3个)</text></view>
				<view class="bd mt16 fboxRow">
					<Tags tagsClass="fboxRow" :list="tagsList" :isDel="true" :isBorder="true" @del="delTag" />
				</view>
				<view class="ft mt20 fboxRow Ycenter Xcenter">
					<view class="btn flex1 fboxRow Ycenter Xcenter font30 btn-gray" @click="clean">清除
					</view>
					<view class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="save">确定
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		getIndustryList
	} from '@/api/card.js';
	import SearchCustom from '@/components/search/search-custom.vue';
	import Tags from '../components/tags.vue';
	export default {
		components: {
			SearchCustom,
			Tags
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				keyword: '',
				itemArr: [],
				tagsList: [],
				isCheckbox: false,
				pageType: 'publishRecruitment', // vita | publishRecruitment
				scrollHeight: 0,
				intoView: ''
			}
		},
		onLoad(options) {
			console.log(options)
			if (options && options.isCheckbox) {
				this.isCheckbox = options.isCheckbox == 1 ? true : false
			}
			// this.isCheckbox = true
			if (options && options.pageType) {
				this.pageType = options.pageType
			}
			if (options && options.expectIndustryList) {
				this.tagsList = JSON.parse(options.expectIndustryList)
			}
			this.getInit()
		},
		onReady() {
			uni.createSelectorQuery(this)
				.selectAll('#scroll-wrap, .filter-space')
				.boundingClientRect(res => {
					uni.getSystemInfo({
						success: sys => {
							const {screenHeight, windowHeight} = sys
							let h = screenHeight
							res.filter(item=>{
								if(item.id == 'scroll-wrap'){
									h = h - item.top
								}else{
									h = h - item.height
								}
							})
							this.scrollHeight = h
						}
					});
				})
				.exec();
		},
		methods: {
			move(item) {
				this.$nextTick(() => {
					this.intoView = item.industryId
					console.log(this.intoView)
				})
			},
			getInit() {
				const vitaTemp = getApp().globalData.vitaTemp
				const workExperience = getApp().globalData.workExperience
				const recruitmentTemp = getApp().globalData.recruitmentTemp
				console.log('存储数据===>', vitaTemp, recruitmentTemp);
				if (this.pageType == 'publishRecruitment') {
					if (this.isCheckbox) {
						this.tagsList = recruitmentTemp.industryList
					} else {
						this.tagsList = recruitmentTemp.industryList
					}
				} else {
					if (this.isCheckbox) {
						this.tagsList = vitaTemp.expectIndustryList
					} else {
						// this.tagsList = [vitaTemp.workExperienceList[0].industry]
						this.tagsList = [workExperience.industry]
					}

				}
				// uni.getSystemInfo({
				// 	success: (sys) => {
				// 		console.log(sys.screenHeight - getApp().globalData.statusBarHeight - 184 - 94)
				// 		if (this.isCheckbox) {
				// 			this.scrollHeight = sys.screenHeight - getApp().globalData.statusBarHeight - 184 -
				// 				100
				// 		} else {
				// 			this.scrollHeight = sys.screenHeight - getApp().globalData.statusBarHeight - 100
				// 		}
				// 	}
				// })
				this.getList()
			},
			getList() {
				getIndustryList({
					industryName: this.keyword
				}).then(res => {
					this.itemArr = res.data
				})
			},
			serarchList() {
				this.getList()
			},
			checkTap(e) {
				if (this.isCheckbox) {
					// if(this.tagsList.length < 3){
					// 	// this.tagsList.push(e.industryName)
					// 	const index = this.tagsList.indexOf(e.industryName)
					// 	if(index != -1){
					// 		this.tagsList.splice(index, 1)
					// 	}else{
					// 		this.tagsList.push(e.industryName)
					// 	}
					// }else{
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '行业最多选择3个'
					// 	})
					// }

					const index = this.tagsList.indexOf(e.industryName)
					if (index != -1) {
						this.tagsList.splice(index, 1)
					} else {
						if (this.tagsList.length < 3) {
							this.tagsList.push(e.industryName)
						} else {
							uni.showToast({
								icon: 'none',
								title: '行业最多选择3个'
							})
						}
					}
				} else {
					this.tagsList = [e.industryName]
					this.save()
				}
			},
			delTag(index) {
				this.tagsList.splice(index, 1)
			},
			clean() {
				this.tagsList = []
			},
			save() {
				const vitaTemp = getApp().globalData.vitaTemp
				const workExperience = getApp().globalData.workExperience
				const recruitmentTemp = getApp().globalData.recruitmentTemp
				if (this.pageType == 'publishRecruitment') {
					if (this.isCheckbox) {
						recruitmentTemp.industryList = this.tagsList
					} else {
						recruitmentTemp.industry = this.tagsList.toString()
					}
				}
				if (this.pageType == 'vita') {
					if (this.isCheckbox) {
						vitaTemp.expectIndustryList = this.tagsList
					} else {
						workExperience.industry = this.tagsList.toString()
					}
				}
				console.log('workExperience=========>', workExperience);
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap{}
	.pt32{padding-top: 32rpx;}
	.pb32{padding-bottom: 32rpx;}
	.filter-left {
		width: 204rpx;
		border-right: 1rpx solid var(--backgroundDivisionColor)
	}

	.filter-left .nav-item {
		padding: 0 24rpx 0 40rpx;
		height: 82rpx;
		line-height: 82rpx;
	}

	.filter-center {
		padding: 0 0 0 32rpx;
	}

	.filter-center .nav-item {
		margin: 16rpx 16rpx 0 0;
		padding: 0 24rpx;
		width: 228rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 8rpx;
	}

	.filter-space {
		height: 368rpx;
	}

	.filter-check {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 40rpx 40rpx 54rpx;
		height: 368rpx;
		background-color: var(--darkViewBgColor)
	}

	.filter-check .bd {
		height: 112rpx;
	}

	.filter-check .btn {
		height: 76rpx;
		border-radius: 12rpx;
	}

	.filter-check .btn+.btn {
		margin-left: 24rpx;
	}
	.active-btn{background: var(--pureButtonBackOneColor);color: var(--contourButtonTextColor);border: 1px solid var(--buttonOutlineOneColor)}
	.btn-gray{background: var(--translucenceButtonBackTwoColor);color: var(--contentFontFourColor);}
</style>